<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>蜗牛图书商城</title>
</head>
<body>
	<!-- 标题栏 -->
	<jsp:include page="header.jsp"></jsp:include>

	<!-- 商品展示 -->
	<div class="col-md-10 col-md-push-1">
		<div class="col-md-12 bg-danger text-left" style="margin-bottom: 10px">
			<div class="col-md-6 text-left">
				<h3>${loginUser.uname}的收货地址</h3>
			</div>
			<div class="col-md-6 text-right">
				<button class="btn btn-lg btn-primary" onclick="goBack()"
					style="height: 56px">返回</button>
			</div>
		</div>
		<div style="height: 630px;">
			<div class="col-md-12 bg-warning text-center" id="cartView">
				<div class="col-md-12 text-center panel" id="view"
					style="margin-top: 10px">
					<!-- 展示操作路径 -->
					<div class="panel-heading text-left">
						<a href="index.jsp">商城首页</a>-><a href="MyAddress.jsp">收货地址管理</a>-><a
							href="javascript:void(0)">修改收货地址</a>
					</div>
					<!-- 面板主体 -->
					<div class="panel-body">
						<form action="address?opr=update&aid=${address.aid}" method="post"
							onsubmit="return check()"
							class="form form-horizontal  col-md-push-1 col-md-10 ">
							<div class="form-group ">
								<div class="col-md-3 text-right">
									<label for="aname">收件人姓名：</label>
								</div>
								<div class="col-md-4">
									<input type="text" name="aname" id="aname"
										value="${address.aname}" placeholder="请输入收件人姓名"
										onblur="checkAname()" class="form-control" />
								</div>
								<div class="col-md-5 text-left">
									<span id="anameMsg">&nbsp;</span>
								</div>
							</div>
							<div class="form-group ">
								<div class="col-md-3 text-right">
									<label for="aphone">联系电话：</label>
								</div>
								<div class="col-md-4">
									<input type="text" name="aphone" id="aphone"
										value="${address.aphone}" placeholder="请输入收件人的11位手机号码"
										onblur="checkAphone()" class="form-control" />
								</div>
								<div class="col-md-5 text-left">
									<span id="aphoneMsg">&nbsp;</span>
								</div>
							</div>
							<div class="form-group ">
								<div class="col-md-3 text-right">
									<label for="acode">邮政编码：</label>
								</div>
								<div class="col-md-4">
									<input type="text" name="acode" id="acode"
										value="${address.acode}" placeholder="请输入收件人所在地的邮政编码"
										onblur="checkAcode()" class="form-control" />
								</div>
								<div class="col-md-5 text-left">
									<span id="acodeMsg">&nbsp;</span>
								</div>
							</div>
							<div class="form-group ">
								<div class="col-md-3 text-right">
									<label for="provice">省（自治区、直辖市）：</label>
								</div>
								<div class="col-md-7">
									<select id="provice" class="form-control"></select> <input
										type="hidden" id="proviceName" value="" name="provice">
								</div>
							</div>
							<div class="form-group ">
								<div class="col-md-3 text-right">
									<label for="gstock">市（地区、自治州、盟）：</label>
								</div>
								<div class="col-md-7">
									<select id="city" class="form-control"></select> <input
										type="hidden" id="cityName" value="" name="city">
								</div>
							</div>
							<div class="form-group ">
								<div class="col-md-3 text-right">
									<label for="gstock">县（区、县级市、旗）：</label>
								</div>
								<div class="col-md-7">
									<select id="area" class="form-control"></select> <input
										type="hidden" id="areaName" value="" name="area">
								</div>
							</div>
							<div class="form-group ">
								<div class="col-md-3 text-right">
									<label for="ainfo">详细地址：</label>
								</div>
								<div class="col-md-7">
									<textarea rows="3" cols="100%" placeholder="请输入收件人的详细地址"
										name="ainfo" id="ainfo" onblur="checkAinfo()"
										class="form-control"></textarea>
								</div>
								<div class="col-md-7 col-md-push-3 text-left">
									<span id="ainfoMsg">&nbsp;</span>
								</div>
							</div>
							<div class="form-group col-md-8">
								<button type="submit" class="btn btn-md btn-success">保存</button>
								<button type="reset" class="btn btn-md btn-warning">重置</button>
							</div>
						</form>
					</div>
					<!-- 新增按钮 -->
					<div class="panel-footer" style="height: 50px"></div>
				</div>
			</div>
			<div class='col-md-12 bg-warning' style="height: 50px;"></div>
		</div>
	</div>
	<!-- 版权页 -->
	<jsp:include page="footer.jsp"></jsp:include>
</body>
<!-- 生成省市县三级地址 -->
<script type="text/javascript">
	let jsonObj;

	$("#provice").change(function() {
		let proviceVal = $("#provice").val();
		creatOp(jsonObj[proviceVal].city, $("#city"));
		if (jsonObj[proviceVal].city == null) {
			$("#area").empty();
		} else {
			creatOp(jsonObj[proviceVal].city[0].area, $("#area"));
		}
		getPCA();
	});

	$("#city").change(function() {
		let proviceVal = $("#provice").val();
		let cityVal = $("#city").val();
		creatOp(jsonObj[proviceVal].city[cityVal].area, $("#area"));
		getPCA();
	});

	$("#area").change(function() {
		getPCA();
	})

	function creatOp(list, selectObj) {
		selectObj.empty();
		$.each(list, function(index, obj) {
			let optObj = $("<option></option>");
			optObj.text(obj.name);
			optObj.val(index);
			selectObj.append(optObj);
		})
	}

	//获得省市县名称
	function getPCA() {
		let proviceVal = $("#provice").val();
		let cityVal = $("#city").val();
		let areaVal = $("#area").val();
		$("#proviceName").val(jsonObj[proviceVal].name);
		$("#cityName").val(jsonObj[proviceVal].city[cityVal].name);
		$("#areaName")
				.val(jsonObj[proviceVal].city[cityVal].area[areaVal].name);
	}
</script>
<script type="text/javascript">
	$(document).ready(function() {
		if ("${loginUser.ucartid}" == "" || "${loginUser.ucartid}" == 0) {
			alert("请登录商城用户账号！");
			location.href = "index.jsp";
		} else {
			if ("${msg}" == "ok") {
				$.getJSON("js/city_code.json", function(result) {
					jsonObj = result;

					let ainfo = "${address.ainfo}";
					let ainfos = ainfo.split("-");

					creatOp(jsonObj, $("#provice"));

					let proviceVal;
					$("#provice option").each(function(index, obj) {
						if ($(obj).text() == ainfos[0]) {
							$(obj).prop("selected", true);
							proviceVal=$(obj).val();
						}
					});

					creatOp(jsonObj[proviceVal].city, $("#city"));

					let cityVal;
					$("#city option").each(function(index, obj) {
						if ($(obj).text() == ainfos[1]) {
							$(obj).prop("selected", true);
							cityVal=$(obj).val();
						}
					});

					creatOp(jsonObj[proviceVal].city[cityVal].area, $("#area"));

					$("#area option").each(function(index, obj) {
						if ($(obj).text() == ainfos[2]) {
							$(obj).prop("selected", true);
						}
					});

					$("#ainfo").text(ainfos[ainfos.length - 1]);

					getPCA();
				});
			} else if ("${msg}" == "null") {
				alert("请重新登录！");
				location.href = "index.jsp";
			} else if ("${msg}" != "") {
				alert("${msg}");
			}
		}
	})

	//继续购物
	function goBack() {
		history.go(-1);
	}

	//检查收件人姓名格式是否正确
	function checkAname() {
		let zz = /^[·a-zA-Z\u4e00-\u9fa5]{2,20}$/;
		let anameVal = $("#aname").val();
		if (zz.test(anameVal)) {
			$("#anameMsg").html("<font color='green'>✔</font>");
			return true;
		} else {
			$("#anameMsg").html(
					"<font color='red'>姓名只可以有字母、汉字，长度在2-20位之间。</font>");
			return false;
		}
	}

	//电话号码长度必须为11位，而且只包含数字；
	function checkAphone() {
		let zz = /(^1[3-9]\d{9}$)|(^0\d{2}-[1-9]\d{7}$)|(^0\d{3}-[1-9]\d{6}$)/;
		let aphoneVal = $("#aphone").val();
		if (zz.test(aphoneVal)) {
			$("#aphoneMsg").html("<font color='green'>✔</font>");
			return true;
		} else {
			$("#aphoneMsg").html("<font color='red'>手机号码格式错误。</font>");
			return false;
		}
	}

	//邮编长度必须为6位，而且只包含数字；
	function checkAcode() {
		let zz = /^\d{6}$/;
		let acodeVal = $("#acode").val();
		if (zz.test(acodeVal)) {
			$("#acodeMsg").html("<font color='green'>✔</font>");
			return true;
		} else {
			$("#acodeMsg").html("<font color='red'>邮政编码格式错误。</font>");
			return false;
		}
	}

	//检查详细长度是否超标
	function checkAinfo() {
		let ainfoVal = $("#ainfo").val();
		if (parseInt(ainfoVal.length) < 120) {
			$("#ainfoMsg").html("<font color='green'>✔</font>");
			return true;
		} else {
			$("#ainfoMsg").html(
					"<font color='red'> 详细地址不能超过120个字符(当前字符数："
							+ ainfoVal.length + ")。</font>");
			return false;
		}
	}

	function check() {
		return (checkAname() && checkAphone() && checkAcode() && checkAinfo())
	}
</script>
</html>